<template>
    <div>
        <!-- 这是顶部滑动条区域 若使用区域滚动组件，需手动初始化scroll控件 -->
        <div id="slider" class="mui-slider">
            <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                <div class="mui-scroll" style="transform: translate3d(0px, 0px, 0px) translateZ(0px);">
                    <!-- @click="getPhotoListByCateId(item.id)" 还可以用 MUI 中 封装的 @tap="getPhotoListByCateId(item.id)" 来解决手机端产生的bug-->
                    <a :class="['mui-control-item', item.id == 0 ? 'mui-active':'']" v-for="item in Cates" :key="item.id" @tap="getPhotoListByCateId(item.id)">
                        {{ item.title }}
                    </a>
				</div>
			</div>
		</div>

        <!-- 显示对应分类的图片列表 -->
        <ul class="photo-list"> 
            <router-link v-for="item in PhotoList" :key="item.id" :to="'/home/photoInfo/'+item.id" tag="li">
                <img v-lazy="item.img_url">
                <div class="info">
                    <h1 class="info-title">{{ item.title }}</h1>
                    <div class="info-body">
                        {{ item.zhaiyao }}
                    </div>
                </div>
            </router-link>
        </ul>
    </div>
</template>

<script> 
// 1. 导入 MUI 的 js 文件
import mui from '../../lib/MUI/js/mui.min.js';
import { Toast } from 'mint-ui';

// 2. 初始化滑动控件，此时 页面的 DOM 元素还没有挂在到页面
// mui('.mui-scroll-wrapper').scroll({
// 	deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
// });

export default {
    data(){
        return {
            Cates: [], // 存放 所有title分类的 数组
            // 默认进入页面，就主动请求，所有图片列表的数据
            PhotoList: [], // 存储 所有图片列表 的数组
        };
    },
    created(){
        this.getAllCategory();
        this.getPhotoListByCateId(0);
    },
    mounted() { 
        // 当组件中的 DOM 结构被渲染好 并 放到页面中的时候，会执行这个钩子函数
        // 如果要操作元素，最好是在 mounted 里面，因为这时候的 DOM 元素时最新的 
    	// 2. 初始化滑动控件，需要在组件的 mounted 事件钩子中，注册 mui 的 scroll 滚动事件
        mui(".mui-scroll-wrapper").scroll({
            deceleration: 0.0005, //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
        });
    },
    methods: {
        /* 获取所有 title 分类 */
        getAllCategory(){
            this.$http.get("api/getimgcategory").then( result => {
                // 数据获取成功
                if(result.body.status === 0){
                    // 因为 后端没有 设置 全部 这个分类，所以需要前端 手动 使用 unshift 来添加一下
                    result.body.message.unshift( { title:"全部", id:0 });
                    this.Cates = result.body.message;
                }else{
                    // 数据获取失败
                    Toast('加载title失败。。。');
                }
            })
        },
        /* 获取所有 图片列表 */
        getPhotoListByCateId(cateId) {
            // 根据 分类Id，获取图片列表
            this.$http.get("api/getimages/" + cateId).then(result => {
                // 数据获取成功
                if (result.body.status === 0) {
                    result.body.message.forEach( ( item, i ) => {
                        item.img_url = 'https://article-img.chuanbojiang.com/word/20210120/7412_html_79aa1709f45d212f.png?x-oss-process=style/resize-w800'
                    });
                    this.PhotoList = result.body.message;
                }else{
                     // 数据获取失败
                    Toast('加载图片列表详情失败。。。');
                }
            });
        }
    },
    props: ["id"],
}
</script>

<style scoped>
*{
    touch-action: pan-y;
}

.photo-list{
    list-style: none;
    margin:0px;
    padding:10px;
    padding-bottom: 0px;
}

.photo-list li {
    background-color: #ccc;
    text-align: center;
    margin-bottom: 10px;
    box-shadow: 0 0 9px #999;
    position: relative;
}

.photo-list img{
    width:100%;
    vertical-align: middle;
}

.photo-list img[lazy=loading] {
  width: 40px;
  height: 300px;
  margin: auto;
}

.info{
    position: absolute;
    bottom: 0px;
    /* left: 0px; */
    background-color: rgba(0, 0, 0, 0.4);
    text-align: left;
    max-height: 84px; /* 最大高度 */
    padding:5px;
}
.info-title{
    font-size: 13px;
    color: white;
    
    margin: 0;
    padding: 0;
}

.info-body{
    font-size: 12px;
    color: white;
}
</style>